<template>
	<view class="wuliu">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'物流信息'"></Hearder>
		<!-- #endif -->
		<view class="wuliuinfo">
			<view class="item_detail">
				<view class="item_top clearfix">
					<image :src="details.thumb"></image>
					<view class="item_dec">
						<view class="infoname">{{details.express_company}}</view>
						<view class="kefu">官方电话: {{details.tel}}</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="wuliu_con">
			<view class="item_bottom">
				<text>快递单号：{{details.express_no}}</text>
				<text class="copy" @click="copyurl">复制</text>
			</view>
			<view class="content">
				<view class="every" v-for="(value, index) in courier" :key="index">
					<view :style="{background:index==0?'linear-gradient(to top,#F63C3C,#FF5A4E)':''}"></view>
					<view>
						<text :style="{color:index==0?'#323232':''}">{{value.AcceptTime}}</text>
						<text :style="{color:index==0?'#323232':''}">{{value.AcceptStation}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				details:{},
				courier:[],
				type:1
			}
		},
		onLoad(options) {
			this.order_id= options.order_id || this.$route.query.order_id
			this.request('/order/express',{order_id:this.order_id}).then(res => {
				if(res.data.code==-500){
					this.showLogin=true
				}
				if(res.data.code==1){
					 this.detail = res.data.data.order
				}
			})
		},
		methods:{
			copyurl(){
				uni.setClipboardData({
					data: this.details.express_no,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.wuliu{
		background-color: $uni-background-color;
		padding-top: 10rpx;
		min-height: 100%;
		.wuliuinfo{
			margin: 0rpx 3%;
			background-color: #fff;
			border-radius: 20rpx;
			.item_detail{
				.item_top{
					padding: 4%;
					image{
						float: left;
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}
					.item_dec{
						float: left;
						margin-left: 20rpx;
						.infoname{
							font-weight: 800;
						}
						.kefu{
							color: #999;
							font-size: 20rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
		.wuliu_con{
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 3%;
			.content{
				border-radius: 10rpx;
				padding: 0 20rpx;
				.every{
					display: flex;
					padding: 30rpx 0;
					view:nth-of-type(1){
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						background:#999;
						margin: auto 0;
					}
					view:nth-of-type(2){
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						width: 100%;
						text{
							color: #999;
						}
						text:nth-of-type(1){
							font-size: 26rpx;
						}
						text:nth-of-type(2){
							font-size: 22rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
			.item_bottom{
				padding: 20rpx 4%;
				background: $uni-item-color;
				text{
					color: #fff;
				}
				.copy{
					color: #fff;
					margin-left: 20rpx;
					border: 2rpx solid #fff;
					font-size: 22rpx;
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}
		
	}
</style>
